import React, { PureComponent } from 'react';
// 主页
// 引入css样式
import './scss/hoem.scss';
// 引入antd
import { Button, Modal, Input, message } from 'antd';
// 自定义图标
import { SettingTwoTone } from '@ant-design/icons';
// 引入axios
import Axios from 'axios';
// 引入路由
import { NavLink } from 'react-router-dom';
// 引入地址
import { webSite } from '../website.js';
//npm install clipboard
// 引入点击复制到粘贴板的办法
import copy from 'copy-to-clipboard';
// 引入动作
import store from '../store/index';
// 多行文本输入框
const { TextArea } = Input;

export default class Home extends PureComponent {
  constructor() {
    super()
    this.state = {
      // 要显示的当前状态
      time: '',
      // 彩虹屁
      listWord: '',
      // 对话框是否显示
      visible: false,
      // 微信对话框是否显示
      wxVisible: false,
      // 意见反馈
      isOpinion: false,
      // 多行文本框内容
      textArea: '',
      // 背景图片
      backgroundUrl: 'http://isea.site/usr/uploads/2020/03/707231762.png',
      // 主页公告
      homeNotice: ''
    }
    // state的写法
    this.unSubscribe = store.subscribe(() => {
      // 强制更新
      this.forceUpdate()
    })
  }
  // 清除订阅者
  componentWillUnmount () {
    this.unSubscribe()
    // 卸载异步操作设置状态
    this.setState = () => {
      return;
    }
  }
  // 在网页加载生命周期时判断时间加载句子和加载音乐
  componentDidMount () {
    // 获取仓库的id值
    // 获取仓库的密码值
    let { userId } = store.getState().reducer;
    const _this = this;
    // 网页记载请求公告数据
    Axios.create({
      baseURL: `${webSite}:3003`
    }).post("/getHomeNotice").then(err => {
      if (err.data.code === 'N0001') {
        _this.setState({
          homeNotice: err.data.Notice
        })
      }
    }).catch(() => {
      message.error({ content: '请检查您的网络连接', className: 'bulletChatMessage' });
    })

    // 计算当前时间
    const hour = new Date().getHours();//得到小时 
    // 根据当前小时判断提示时间
    if (hour > 18) {
      this.setState({
        time: '晚上好',
        backgroundUrl: 'http://isea.site/usr/uploads/2020/03/689486528.png'
      })
    } else if (hour > 13) {
      this.setState({
        time: '下午好',
        backgroundUrl: 'http://isea.site/usr/uploads/2020/03/1522903590.png'
      })
    } else if (hour > 10) {
      this.setState({
        time: '中午好',
        backgroundUrl: 'http://isea.site/usr/uploads/2020/03/3690580339.png'
      })
    } else if (hour > 5) {
      this.setState({
        time: '早上好',
        backgroundUrl: 'http://isea.site/usr/uploads/2020/03/707231762.png'
      })
    } else if (hour >= 0) {
      this.setState({
        time: '夜深了，注意休息',
        backgroundUrl: 'http://isea.site/usr/uploads/2020/03/430818585.png'
      })
    }
    // 跟换背景图
    // 用户登录之后才能更换背景图
    if (userId) {
      Axios.create({
        baseURL: `${webSite}:3003`
      }).post("/background", { userid: userId }).then(err => {
        if (err.data.code === 'L0003') {
          // 用户自定义之后设置背景图
          this.setState({
            backgroundUrl: err.data.background
          })
        }
      }).catch(() => {
        message.error({ content: '请检查您的网络连接', className: 'bulletChatMessage' });
      })
    }
    // 彩虹屁加载到页面上
    Axios.create({
      baseURL: `${webSite}:3003`
    }).post("/word").then(err => {
      // 把请求回来的结果放到页面上
      this.setState({
        listWord: err.data.msg
      })
    }).catch(() => {
      message.error({ content: '请检查您的网络连接', className: 'bulletChatMessage' });
    })
  }

  // 首页文字点击
  BtnCopy = (listWord) => {
    if (copy(listWord)) {
      message.success({ content: '复制成功', className: 'bulletChatMessage' });
    } else {
      message.error({ content: '您的设备不支持自动复制', className: 'bulletChatMessage' });
    }
  }

  // 提示的点击事件
  ClickNotice = () => {
    this.setState({
      visible: true,
    });
  }
  // 点击确认的事件
  handleOk = e => {
    this.setState({
      visible: false,
    });
  };
  // 微信点击出图片
  wxClick = () => {
    this.setState({
      wxVisible: true,
    });
  }
  // 微信退出
  wxhandleOk = e => {
    // 保存图片到相册中 
    message.success({ content: '图片保存成功', className: 'bulletChatMessage' });
    this.setState({
      wxVisible: false,
    });
  };
  // 意见反馈
  opinion = () => {
    let { userId } = store.getState().reducer;
    if (userId) {
      this.setState({
        isOpinion: true,
      });
    } else {
      message.error({ content: '请先登录再提交意见', className: 'bulletChatMessage' });
    }
  }
  // 取消提交意见
  SetOpinion = () => {
    this.setState({
      isOpinion: false,
    });
  }
  // input输入时的回调函数
  handleInput = ({ target }) => {
    let { name, value } = target
    // 设置input和state同步
    this.setState({
      [name]: value
    })
  }

  // 提交意见
  fromOpinion = () => {
    let { userId, userQq } = store.getState().reducer;
    // 去掉空格
    const _textArea = this.state.textArea.replace(/\s+/g, "");
    if (_textArea) {
      Axios.create({
        baseURL: `${webSite}:3003`
      }).post("/proposal", { id: userId, qq: userQq, TextContent: _textArea }).then(err => {
        if (err.data.code === 'A0001') {
          message.success({ content: '建议提交成功', className: 'bulletChatMessage' });
          // 意见提交成功后关闭提示框
          this.setState({
            isOpinion: false,
            textArea: ''
          });
          return;
        }
        // 没有写入数据库时提示用户
        message.warning({ content: '您的建议提交失败', className: 'bulletChatMessage' });
      }).catch(() => {
        message.error({ content: '请检查您的网络连接', className: 'bulletChatMessage' });
      })
    } else {
      // 用户没用输入或输入空格时提醒
      message.warning({ content: '请输入您的建议', className: 'bulletChatMessage' });
    }
  }

  // 点击关闭微信二维码
  handleCancel = () => {
    this.setState({
      wxVisible: false,
    });
  };

  // 下载APP
  xiazaiApp = () => {
    var a = document.createElement("a");
    a.download = 'download';　　//下载的文件名，默认是'下载'
    a.href = `https://gitee.com/react1810/webliang`;
    a.target = '_blank';
    document.body.appendChild(a); a.click(); a.remove();　　//下载之后把创建的元素删除
  }

  render () {
    let { userId, userQq } = store.getState().reducer;
    const { homeNotice, backgroundUrl } = this.state;
    // 图片下载地址
    let EwmImg = `${webSite}/static/media/9527.311c0de2.jpg`;
    return (
      <div id='homepage'>
        {/* 设置一个不动的背景图 */}
        <div className='background_home_F' style={{ background: `URL(${backgroundUrl})` }}></div>
        <div className='background_home'>
          {/* 设置一个随着时间变换的问候语 */}
          <h2 className='he_riqi'>{this.state.time}</h2>
          <div className='home_span' onClick={() => this.BtnCopy(this.state.listWord)}>{this.state.listWord}</div>
          <div className='logo_home'>
            {/* 点击之后弹出通知 */}
            <div className='img_box' onClick={this.ClickNotice}>
              <img src={require('./img/xiaoxi.png')} alt="tubiao" width='30px' height='30px' />
            </div>
            {/* 提示的弹出框 */}
            <Modal
              title="通知"
              visible={this.state.visible}
              footer={null}
              bodyStyle={{ paddingTop: '10px', height: '40vh' }}
            >
              <div className='homeNotice' dangerouslySetInnerHTML={{ __html: homeNotice }} />
              <Button className='BtnModal' onClick={this.handleOk} block type="primary">确定</Button>
            </Modal>
            {/* 跳转qq登录 */}
            <div className='img_box'>
              <a href="mqqwpa://im/chat?chat_type=wpa&uin=2489919598">
                <img src={require('./img/qq.png')} alt="tubiao" width='30px' height='30px' />
              </a>
            </div>
            <div className='img_box' onClick={this.wxClick} id='EwmTz'>
              <img src={require('./img/wenxin.png')} alt="tubiao" width='30px' height='30px' />
            </div>
            {/* 微信提示框 */}
            <Modal
              title="添加微信好友"
              visible={this.state.wxVisible}
              footer={null}
              maskClosable={true}
              onCancel={this.handleCancel}
              bodyStyle={{ padding: '0' }}
            >
              <img src={require('./img/9527.jpg')} alt="微信添加好友图片" className='wxImg' />
              <a href={EwmImg} download="扫码添加微信.jpg">
                <Button className='BtnModal' onClick={this.wxhandleOk} block type="primary">保存到本地</Button>
              </a>
            </Modal>
            {/* 下载 */}
            <div className='img_box' onClick={this.xiazaiApp}>
              <img src={require('./img/mayun.png')} alt="tubiao" width='30px' height='30px' />
            </div>
            {/* 意见反馈 */}
            <div className='img_box' onClick={this.opinion}>
              <img src={require('./img/shangchuan.jpg')} alt="tubiao" width='30px' height='30px' />
            </div>
            <Modal
              title="提交建议反馈"
              visible={this.state.isOpinion}
              footer={null}
            >
              {/* 输入框 */}
              <TextArea rows={6} style={{ marginBottom: '5px', resize: 'none' }} placeholder='请输入您的建议' value={this.state.textArea} name='textArea' onChange={this.handleInput} maxLength='100' />
              {/* 确认提交按钮 */}
              <Button className='BtnModal' style={{ width: '40%' }} block type="primary" onClick={this.fromOpinion}>提交</Button>
              {/* 取消按钮 */}
              <Button type="primary" danger className='BtnBoke' onClick={this.SetOpinion}>取消</Button>
            </Modal>
          </div>
          {/* 点击进入更换音乐的页面 */}
          <div style={{ position: 'relative' }}>
            <NavLink to='/application'>
              <Input value='搜索应用' name='input' className='BtnCla' />
              <img src={require('./img/resizeApi.png')} alt="放大镜" className='SettingIcon' />
            </NavLink>
          </div>
          {/* 内容 */}
          <div className='ContentDiv'>
            <div className='LeftMovies'>
              {/* 影视 */}
              <NavLink to='/Movies'>
                <div className='MoviesRoute'></div>
              </NavLink>

              {/* 生活 */}
              <NavLink to='/life'>
                <div className='home_life'></div>
              </NavLink>

              {/* 番剧 */}
              <NavLink to='/fanopera'>
                <div className='home_FanOpera'></div>
              </NavLink>

              {/* 番剧 */}
              <NavLink to='/novel'>
                <div className='home_xiaoshuo'></div>
              </NavLink>
            </div>

            {/* 右侧 */}
            <div className='RightMovies'>
              {/* 直播 */}
              <NavLink to='/TVlive'>
                <div className='home_lightTvlive'></div>
              </NavLink>

              {/* 用户登录 */}
              {
                userQq ? <div className='login_home_true'>
                  <img src={userQq ? `http://q1.qlogo.cn/g?b=qq&nk=${userQq}&s=640` : 'http://q1.qlogo.cn/g?b=qq&nk=2489919598&s=640'} alt="头像" className='qqtoux' />
                  <NavLink to='/wall'>
                    <SettingTwoTone className='Home_log_wall' />
                  </NavLink>
                  <span className='home_login_span_id'>id：{userId}</span>
                </div> : <NavLink to='/login'><div className='login_home_false'></div></NavLink>
              }

              {/* 交友 */}
              <NavLink to='/friend'>
                <div className='home_friend'></div>
              </NavLink>

              {/* 轻音乐 */}
              <NavLink to='/lightMusic'>
                <div className='home_lightMusic'></div>
              </NavLink>
            </div>
          </div>
        </div >
        {/* 底部内容 */}
        <div className='home_botton'>
          <p className='home_botton_p'>
            <span style={{ display: 'block' }}>内容收集于互联网，只提供web页面服务</span>
            <span style={{ display: 'block' }}>不提供影片资源存储录制、上传,播放功能</span>
            <span style={{ display: 'block' }}>版权@ 海岸盒子(海岸盒子软件/海岸工作室)</span>
            友情链接：http://isea.site/
          </p>
        </div>
      </div>
    )
  }
}
